<template>
  <!-- 书写html结构 -->
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="立即结算"
      left-text="返回"
      left-arrow
      @click-left="jump('/')" />

    <van-cell-group inset>
      <van-cell title="门店" :value="storeName" />
      <van-cell title="车牌号" :value="carNo" />
      <van-cell title="消费时间" :value="MinuteDifferenceL" />
      <van-cell title="进场时间" :value="startTime" />
      <van-cell
        style="color: #d56563; text-align: left"
        title="*倒车即可识别结算开门未能识别再进行手动结算.....
                       *开门后10秒落门，请即刻离场" />
    </van-cell-group>

    <van-popup
      v-model="popupVisible"
      position="bottom"
      :style="{ height: '42%' }">
      <van-radio-group v-model="selectedOption">
        <van-radio
          v-for="option in options"
          :name="option.carNo"
          style="margin-top: 3%">
          {{ option.carNo }}
        </van-radio>
      </van-radio-group>
      <van-button type="primary" @click="submit" style="margin-top: 1%"
        >确定</van-button
      >
    </van-popup>

    <van-button
      round
      type="info"
      style="margin-top: 10px; width: 80%"
      @click="settlement"
      >立即结算</van-button
    >
  </div>
</template>

<script>
import moment from "moment";
import { Toast } from "vant";
import { Dialog } from "vant";
//书写组件配置项目 相当于写js代码的地方
//要求template必须有且只有一个根元素，如果有两个就不知道绑定那个
export default {
  //export default 相当于过去的new vue ({el:"#div"})
  //全部都是json格式

  props: {
    //注册属性，用来父子组件传递参数使用
  },
  data() {
    //定义数据的地方
    return {
      popupVisible: false,
      selectedOption: "", //选中回显
      options: [],
      carNo: "", //车牌
      storeName: "", //门店名称
      checkoutId: "", //账单id
      price: "", //单价
      startTime: "", //进场时间
      MinuteDifferenceL: "", //使用时间
      amount: "", //余额
      userId: "", //用户id
      storeId: "", //门店id
      totalPrice: "", //总价
      stationId: "", //工位id
      balanceId: "", //余额id
    };
  },
  created() {
    this.loadwash();
    //生命周期  创建后要做的事情  vue被创建时候执行的
  },
  mounted() {
    // 生命周期  挂载完成后
  },
  methods: {
    //获取余额
    settlement() {
      //不是直接使用axios 而是使用$http
      //baseURL="http://localhost:8080"
      var _this = this;
      this.$http
        .get(
          "/balance/queryUserAndStore?userId=" +
            this.userId +
            "&storeId=0" +
            this.storeId
        )
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            _this.amount = response.data.data.amount;
            _this.balanceId = response.data.data.balanceId;
            //this不可以直接使用 代表的是axios对象
            _this.carNostore();
            setTimeout(function () {
              _this.Charging();
            }, 1000); // 定时时间
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    Charging() {
      if (this.MinuteDifferenceL <= 10) {
        this.totalPrice = this.price;
      } else {
        let aaa = this.MinuteDifferenceL - 10;
        this.totalPrice = this.price + aaa * 0.5;
      }
      this.amount = this.amount - this.totalPrice;
      if (this.amount < 0) {
        Toast("余额不足请充值");
      } else {
        this.chargingpay();
      }
    },
    //结算
    chargingpay() {
      var _this = this;
      this.$http
        .post(
          "/checkoutInfo/chargin?amount=" +
            this.amount +
            "&userId=" +
            this.userId +
            "&storeId=" +
            this.storeId +
            "&checkoutId=" +
            this.checkoutId +
            "&totalPrice=" +
            this.totalPrice +
            "&stationId=" +
            this.stationId +
            "&balanceId=" +
            this.balanceId
        )
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            Dialog.confirm({
              title: "提示",
              message: "是否进行评价",
            })
              .then(() => {
                //跳转评价
                _this.asdqwe();
              })
              .catch(() => {
                Toast("结算完成，欢迎下次光临");
                setTimeout(function () {
                  _this.$router.push("/");
                }, 1000); // 定时时间
              });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    asdqwe() {
      this.$router.push({
        name: "Comment",
        query: {
          storeId: this.storeId,
          goodsId: this.checkoutId,
        },
      });
    },
    loadwash() {
      this.popupVisible = true;
      //不是直接使用axios 而是使用$http
      //baseURL="http://localhost:8080"
      var _this = this;
      this.$http
        .get("/checkoutInfo/queryUser")
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            _this.options = response.data.data;
            //this不可以直接使用 代表的是axios对象
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    submit() {
      // 处理提交逻辑，selectedOption为选中的选项值
      console.log(this.selectedOption);
      this.popupVisible = false;
      this.carNostore();
    },

    //根据车牌查询
    carNostore() {
      //不是直接使用axios 而是使用$http
      //baseURL="http://localhost:8080"
      var _this = this;
      this.$http
        .get("/checkoutInfo/queryCarNo?carNo=" + this.selectedOption)
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            //this不可以直接使用 代表的是axios对象
            _this.carNo = response.data.data.carNo;
            _this.checkoutId = response.data.data.checkoutId;
            _this.userId = response.data.data.userId;
            _this.storeId = response.data.data.storeId;
            _this.price = response.data.data.washPrice;
            _this.stationId = response.data.data.stationId;
            _this.storeName = response.data.data.storeName;
            //将时间转化为指定类型
            _this.startTime = moment(response.data.data.startTime).format(
              "YYYY年M月D日HH:mm"
            );
            // 将日期字符串转换为Date对象 求连个时间之间的差
            const dateArr = _this.startTime.match(/\d+/g);
            const year = Number(dateArr[0]);
            const month = Number(dateArr[1]) - 1; // 月份需要减1，因为JavaScript中月份是从0开始的
            const day = Number(dateArr[2]);
            const hour = Number(dateArr[3]);
            const minute = Number(dateArr[4]);
            const date = new Date(year, month, day, hour, minute);
            const startMoment = moment(date, "YYYY-MM-DD HH:mm:ss");
            const endMoment = moment(new Date(), "YYYY-MM-DD HH:mm:ss");
            const diffMinutes = endMoment.diff(startMoment, "minutes");
            _this.MinuteDifferenceL = diffMinutes;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //  方法事件处理
    jump(uri) {
      this.$router.push(
        uri,
        () => {},
        () => {}
      );
    },
  },
  components: {
    // 组件注册的地方 相当于pom文件
  },
};
</script>

<style></style>
